﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>IMG LAZY LOAD</title>
	<style>
		.lazy{
			width: 600px;
			overflow: scroll;
			border: 1px solid #ccc;
		}
		.lazy table{
			border-collapse:collapse;
		}		
		.lazy td{
			border: 1px solid #ccc;
			text-align:center;
			padding:20px;
			background:#FFF;
		}
		
		#idLazyContainer{
			height:160px;
			overflow-y:hidden;
			position:relative;
		}
		#idLazyContainer img{
			width: 140px;
			height:100px;
			background:url('o_loading.gif') no-repeat center;
			border: 0;
		}
	</style>
</head>
<body>
	图片延迟加载：共有图片
	<input type="text" id="idTotal" size="3" maxlength="2" value="50" />
	张， 未载入<span id="idShow"></span>张
	<input type="button" id="idReset" value="重新开始" />
	<input type="button" id="idAuto" value="自动播放" />
	<input type="button" id="idPos" value="位置改变" />
	<div class="lazy" id="idLazyContainer" style="position:relative">
		<table cellspacing="0" cellpadding="0">
			<tr id="idLazy">
				<td><a href="http://www.google.com"><img _lazysrc="r_song1.jpg" alt="" /></a></td>
				<td><a href="http://www.google.com"><img _lazysrc="r_song2.jpg" alt="" /></a></td>
				<td><a href="http://www.google.com"><img _lazysrc="r_song3.jpg" alt="" /></a></td>
				<td><a href="http://www.google.com"><img _lazysrc="r_song4.jpg" alt="" /></a></td>
				<td><a href="http://www.google.com"><img _lazysrc="r_song5.jpg" alt="" /></a></td>
			</tr>
		</table>
	</div>
	
	
	<script type="text/javascript" src="./aider.js"></script>
	<script type="text/javascript" src="./l.js"></script>
	<script type="text/javascript" src="./le.js"></script>
	<script type="text/javascript">
	function $$(id){
		return 'string' === typeof id ? 
				document.getElementById(id) : id;
	}
	
	var row = $$('idLazy'),
		msg = $$('idShow'),
		total = $$('idTotal'),
		cells = [];
		
	for(var i=0, n=row.cells.length; i<n; cells.push(row.cells[i++])){}
	
	function Lazy(){
		while(row.firstChild){
			row.removeChild(row.firstChild);
		}
		
		for(var i=0, n=total.value | 0; i<n; i++){
			var img = row.appendChild(cells[0].cloneNode(true)).getElementsByTagName('img')[0];
			img.setAttribute('_lazysrc', img.getAttribute('_lazysrc') + '?' + Math.random());
			cells.push(cells.shift());			
		}
		msg.innerHTML = i;
		var lazy = new ImagesMuLazy({
			container : 'idLazyContainer',
			mode : 'horizontal',
			holder : 'http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_dot.gif',
			onLoad : function(img){msg.innerHTML = --i;}
		});
	}
	
	Lazy();
	var timer;
	</script>
</body>
</html>